<template>
  <component is="a-modal" v-model:visible="visible" :width="1200" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit">
    <div style="height: 70vh;overflow-y: scroll;">
      <a-descriptions title="用户信息&收件人信息" :column="4" bordered size="large">
        <a-descriptions-item label="溯源码" :span="1">{{ detailInfo.info?.code }}</a-descriptions-item>
        <a-descriptions-item label="会员UID" :span="1">{{detailInfo.info?.user?.area==1?'GB'+ detailInfo.info?.user?.id:detailInfo.info?.user?.id }}</a-descriptions-item>
        <a-descriptions-item label="会员名" :span="1">{{ detailInfo.info?.user?.user_name }}</a-descriptions-item>
        <a-descriptions-item label="真实姓名" :span="1">{{ detailInfo.info?.user?.true_name }}</a-descriptions-item>
        <a-descriptions-item label="SKU" :span="2">{{ detailInfo.info?.sku }}</a-descriptions-item>
        <a-descriptions-item label="SKU名称" :span="2">{{ detailInfo.info?.sku_name }}</a-descriptions-item>
        <a-descriptions-item label="证件号" :span="1">{{ detailInfo.info?.userAuth?detailInfo.info?.userAuth?.number:'' }}</a-descriptions-item>
        <a-descriptions-item label="收货人" :span="4" v-if="detailInfo.info?.orderInfo?.getMethods=='post'">
          <div>{{ detailInfo.info?.address?.name }}  {{  detailInfo.info?.address?.mobile }}</div>
        </a-descriptions-item>
        <a-descriptions-item label="收货地址" :span="4" v-if="detailInfo.info?.orderInfo?.getMethods=='post'">
          <div>{{ detailInfo.info?.address?.country }}{{ detailInfo.info?.address?.province }}{{ detailInfo.info?.address?.address }}</div>
        </a-descriptions-item>
        <a-descriptions-item label="自提信息" :span="4" v-if="detailInfo.info?.orderInfo?.getMethods!='post'">
          <div>{{ detailInfo.info?.ziti_info?.ziti_name }}  {{  detailInfo.info?.ziti_info?.ziti_mobile }}</div>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="订单信息" :column="4" bordered size="large" style="margin-top: 20px;">
        <a-descriptions-item label="订单ID" :span="1">{{ detailInfo.info?.orderInfo?.id }}</a-descriptions-item>
        <a-descriptions-item label="单号" :span="1">{{ detailInfo.info?.orderInfo?.order_sn  }}</a-descriptions-item>
        <a-descriptions-item label="下单时间" :span="1">{{ detailInfo.info?.orderInfo?.create_time  }}</a-descriptions-item>
      </a-descriptions>
    </div>



  </component>
</template>

<script setup>
import { ref, reactive, computed, watch, onBeforeUnmount, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import AsApi from '@/api/system/afterSale'
import { throttle } from "lodash";
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'
const emit = defineEmits(["success"]);
const visible = ref(false);
const loading = ref(false);
const spinLoading = ref(false)
let title = computed(() => {
  return "详情"
});
const detailInfo = ref({})
const getData = async (id) => {////在頁面打開之前須加載完成要不然播放报錯
  const { data } = await AsApi.detail_source_code(id)
  detailInfo.value = { ...data }
 
}
// 打开弹框
const open = async (data) => {
  visible.value = true;
  spinLoading.value = true
  await getData(data.id)
};

// 关闭弹窗
const close = () => {
  visible.value = false
};
defineExpose({ open });
</script>